<template>
  <div class="flex gap-2">
    <Input v-show="false" v-model:value="data" />
    <Button @click="handleEdit">编辑</Button>
    <CommonDrawer @register="registerDrawer" @success="handleSuccess" />
  </div>
</template>
<script setup lang="ts">
  import { ref, computed, PropType } from 'vue';
  import { pluginManager } from '/@/views/formDesigner/utils';
  import { useDrawer } from '/@/components/Drawer';
  import CommonDrawer from '/@/views/pages/managerPage/pageComponent/common/CommonDrawer.vue';
  import { useRouter } from 'vue-router';

  const Input = pluginManager.getComponent('input');
  const Button = pluginManager.getComponent('button');
  const [registerDrawer, { openDrawer }] = useDrawer();
  const { currentRoute } = useRouter();

  const emit = defineEmits(['update:modelValue']);
  const props = defineProps({
    modelValue: {
      type: String as PropType<String>,
      default: '',
    },
    record: {
      type: Object as PropType<Object>,
      default: () => {
        return {};
      },
    },
  });
  const data = computed({
    get() {
      console.log('props', props);
      console.log('props.modelValue', props.modelValue);
      return props.modelValue;
    },
    set(e) {
      console.log('eee', e);
      emit('update:modelValue', e);
    },
  });

  const handleEdit = () => {
    console.log('handleEdit data', data.value);
    openDrawer(true, {
      isUpdate: true,
      formCode: currentRoute.value.query.formCode,
      moduleCode: currentRoute.value.query.formCode,
      position: 'form',
      record: data.value,
    });
  };
  const handleSuccess = (val) => {
    data.value = val;
  };
</script>
